<template>
  <el-form
    :model="listValue"
    :label-width="labelWidth"
    :label-position="labelPosition"
    class="collapse"
    ref="form"
  >
    <el-row
      :gutter="gutter"
      class="row"
      v-for="(row, index) in listForm"
      :key="'row' + index"
    >
      <div v-for="col in row" :key="col.id">
        <el-col class="col" :span="col.span || 24 / row.length">
          <el-form-item
            v-if="!col.show || (col.show && col.show(listValue))"
            :label="col.label"
            class="item item-label"
            :prop="col.id"
            :rules="col.rules && col.rules(listValue)"
          >
            <el-select
              v-if="col.type === 'select' && col.change"
              style="width: 100%"
              filterable
              clearable
              remote
              reserve-keyword
              class="item item-value"
              v-model.trim="listValue[col.id]"
              :placeholder="col.placeholder || '请选择'"
              :disabled="disabled"
              :remote-method="remoteMethod"
              @change="onchange"
            >
              <el-option
                v-for="(item, index) in options[col.id]"
                :value="item.value || item[col.mapper[0]]"
                :label="item.label || item[col.mapper[1]]"
                :key="'op' + index"
              >
                {{ item.label || item[col.mapper[1]] }}
              </el-option>
            </el-select>
            <el-select
              v-else-if="col.type === 'select'"
              style="width: 100%"
              filterable
              class="item item-value"
              v-model="listValue[col.id]"
              :placeholder="col.placeholder || '请选择'"
              :disabled="disabled"
            >
              <el-option
                v-for="(item, index) in options[col.id]"
                :value="item.value || item[col.mapper[0]]"
                :label="item.label || item[col.mapper[1]]"
                :key="'op' + index"
              >
                {{ item.label || item[col.mapper[1]] }}
              </el-option>
            </el-select>

            <el-date-picker
              v-else-if="col.type === 'date'"
              style="width: 100%"
              class="item item-value"
              v-model="listValue[col.id]"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期时间"
              :disabled="disabled"
            />
            <el-upload
              v-else-if="col.type === 'upload'"
              style="width: 100%"
              class="item item-value"
              action="#"
              :limit="1"
              :http-request="file => requestUpload(file, col.id)"
              :disabled="disabled"
            >
              <el-button size="small" type="primary">
                {{ listValue[col.id] ? '完成' : '选择' }}
                <i
                  :class="[
                    listValue[col.id] ? 'el-icon-success' : 'el-icon-upload',
                    'el-icon--right'
                  ]"
                ></i>
              </el-button>
            </el-upload>
            <el-cascader
              v-else-if="col.type === 'cascader'"
              style="width: 100%"
              v-model="listValue[col.id]"
              :placeholder="listValue[col.id + 'Name']"
              :options="options[col.id]"
              :props="cascader"
              :show-all-levels="false"
              class="item item-value cascader"
              :disabled="disabled"
            />
            <el-input
              v-else-if="!col.type || col.type === 'input'"
              style="width: 100%"
              class="item item-value"
              v-model="listValue[col.id]"
              :placeholder="col.placeholder || '请输入'"
              :disabled="disabled"
            />
            <el-input
              v-else-if="!col.type || col.type === 'number'"
              style="width: 100%; padding-right: 35px"
              class="item item-value"
              v-model="listValue[col.id]"
              type="number"
              :placeholder="col.placeholder || '请输入'"
              :disabled="disabled"
            >
              <!-- <i slot="suffix" style="font-style: normal; margin-right: 10px">万元</i> -->
            </el-input>
            <span class="text" v-if="col.type === 'number'">万元</span>
          </el-form-item>
        </el-col>
      </div>
    </el-row>
  </el-form>
</template>

<script setup name="FormGroup">
import { fetchClassifyList, fileUpload } from '@/api/order/order'
import {
  reactive,
  toRefs,
  getCurrentInstance,
  watchEffect,
  computed
} from 'vue'
const emit = defineEmits(['onchangeT', 'changeItemT'])
const { proxy } = getCurrentInstance()
const props = defineProps({
  list: {
    type: Array,
    required: true
  },
  disabled: {
    type: Boolean
  },
  labelWidth: {
    type: String,
    default: '160px'
  },
  labelPosition: {
    type: String,
    default: 'right'
  },
  options: {
    type: Object,
    default: function () {
      return {}
    }
  },
  gutter: {
    type: Number,
    default: 0
  },
  value: {
    type: Object,
    default: function () {
      return {}
    }
  }
})
let data = reactive({
  rules: {},
  cascader: {
    label: 'name',
    value: 'code',
    children: 'children',
    checkStrictly: true
  },
  listValue: props.value,
  listForm: props.list
  // listForm: computed(() => {
  //   return props.list
  //   }),
})
let { rules, cascader, listValue, listForm } = toRefs(data)

watchEffect(() => {
  data.listValue = props.value
})

async function init() {
  // this.list.forEach(row => {
  //   row.forEach(col => {
  //     if (col.rules) {
  //       this.rules[col.id] = col.rules
  //     }
  //   })
  // })
}
init()
// 覆盖默认的上传行为
async function requestUpload(file, id) {
  let formData = new FormData()
  formData.append('file', file.file)

  try {
    const res = await fileUpload(formData)
    if (res.code === 200) {
      listValue.value[id] = res.data.url
    } else {
      proxy.$modal.msgError(res.msg)
    }
  } catch (e) {
    console.log(e)
    // this.$message.error('上传文件服务异常 请重试')
  }
}

function onchange(e) {
  // console.log("111",e)
  emit('onchangeT', e)
}
function remoteMethod(query) {
  if (query !== '') {
    emit('changeItemT', query)
  }
}
</script>

<style scoped lang="scss">
.cascader {
  :deep input::-webkit-input-placeholder {
    color: #717171 !important;
  }
  :deep input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #717171 !important;
  }
  :deep input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #717171 !important;
  }
  :deep input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #717171 !important;
  }
}

.collapse .row:last-child {
  margin-bottom: 10px;
}
.text {
  position: absolute;
  left: 230px;
  width: 40px;
}
#mode {
  width: 30%;
}

:deep .el-input__inner {
  width: 200px;
}

.item-label,
.item-value {
  text-align: center;
  font-size: 12px;
  line-height: 30px;
}
</style>
